<template>
    <h2>toRefs的使用</h2>
    <!-- <h3>name:{{state.name}}</h3>
    <h3>age:{{state.age}}</h3> -->
    <h3>name:{{name}}</h3>
    <h3>age:{{age}}</h3>
    <hr>
    <h3>name1:{{name1}}</h3>
    <h3>age1:{{age1}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
function useFeatueX() {
    const state = reactive({
        name1: '自来电',
        age1: 47,
    })
    return {
        ...toRefs(state),
    }
}
export default defineComponent({
    name: 'App',
    setup() {
        const state = reactive({
            name: '自来电',
            age: 47,
        })
        // toRefs可以把一个响应式对象转换为普通对象，该普通对象的每个property都是一个ref
        const { name, age } = toRefs(state)
        const state2 = toRefs(state)

        // 定时器，更新数据，数据变化，界面跟着变化
        // setInterval(() => {
        // // state.age += 1
        //     // state2.age.value += 1
        // // age.value += 1
        // }, 1000)

        const { name1, age1 } = useFeatueX()
        return {
            // state
            // ...state // 不是响应式的数据了--->{name:'自来电',age:47}
            ...state2,
            name1,
            age1,
        }
    },
})
</script>
<style>
</style>